[EuiIcon] Upgrade `svgr`/`svgo` dependencies to latest #6843

cee-chen · 2023-06-14T18:17:58Z

Summary

This PR:

Upgrades all our @svgr/ dependencies to latest (which puts us at using SVGO v3, up from v1)
Updates our svgr config/API calls to latest (see https://react-svgr.com/docs/migrate)
~~Removes the need for manual prettier CLI command by using @svgr/plugin-prettier~~ - removed this addition, as the plugin's Prettier settings didn't match up with our own for whatever reason
Re-runs yarn compile-icons, which changes some SVG output/optimization slightly due to SVGO upgrade

QA

Go to the icons docs pages
Confirm that no icons look broken
Confirm all icons (esp logos and apps) flip as expected in dark mode

General checklist

Checked in both light and dark modes
Checked in mobile
Checked in Chrome, Safari, Edge, and Firefox
Checked for accessibility including keyboard-only and screenreader modes
A changelog entry exists and is marked appropriately

cee-chen

Leaving a couple comments for reference

cee-chen · 2023-06-14T18:20:29Z

package.json

-    "@svgr/core": "5.5.0",
-    "@svgr/plugin-svgo": "^4.0.3",
+    "@svgr/core": "8.0.0",
+    "@svgr/plugin-jsx": "^8.0.1",


The @svgr/plugin-jsx dependency needs to be manually listed now as it's no longer bundled in @svgr/core as of https://github.com/gregberge/svgr/releases/tag/v7.0.0

cee-chen · 2023-06-14T18:21:02Z

scripts/compile-icons.js

@@ -1,10 +1,9 @@
 const glob = require('glob');
-const svgr = require('@svgr/core').default;
+const svgr = require('@svgr/core').transform;


see https://react-svgr.com/docs/migrate/#programmatic-usage

cee-chen · 2023-06-14T18:21:20Z

scripts/compile-icons.js

+const license =
+  require('../.eslintrc.js').rules['local/require-license-header'][1].license;


This was Prettier autolinting this file on save

cee-chen · 2023-06-14T18:21:39Z

scripts/compile-icons.js

        template: (
-          { template },
-          opts,
-          { imports, interfaces, componentName, props, jsx }
+          { imports, interfaces, componentName, props, jsx },
+          { tpl }
        ) =>
          hasIds
-            ? template.ast`
+            ? tpl`


see https://react-svgr.com/docs/migrate/#template

cee-chen · 2023-06-14T18:24:06Z

scripts/compile-icons.js

        svgoConfig: {
          plugins: [
-            { cleanupIDs: true },
-            { prefixIds: false },
-            { removeViewBox: false },
-            { removeUselessStrokeAndFill: false },
+            {
+              name: 'preset-default',
+              params: {
+                overrides: {
+                  removeViewBox: false,
+                  removeUselessStrokeAndFill: false,
+                },
+              },
+            },


see https://github.com/svg/svgo/releases/tag/v2.0.0 config changes. Also see SVGO's default preset docs and their plugins table - cleanupIDs is now listed as automatically present, so no need to override it, and prefixIds is listed as not being automatically present, so no need to disable it

cee-chen · 2023-06-14T18:28:02Z

jenkins test this

kibanamachine · 2023-06-14T18:59:43Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6843/

1Copenut

👍 I looked through the adjusted icons, downloaded your branch, and ran yarn compile-icons and yarn-lint.

Two of the icons threw errors on first lint:

src/components/icon/assets/logo_memcached.tsx
src/components/icon/assets/logo_php.tsx

Running yarn-lint-fix updated those two icons and the second lint run passed 100%.

1Copenut · 2023-06-15T20:27:38Z

Jenkins test this

1Copenut · 2023-06-15T20:53:48Z

Jenkins test this

kibanamachine · 2023-06-15T21:17:39Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6843/

- see https://react-svgr.com/docs/migrate/ for high level of export + API changes - see https://github.com/svg/svgo#default-preset for svgo config changes

kibanamachine · 2023-06-19T04:52:50Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6843/

cee-chen · 2023-06-19T05:20:58Z

src/components/icon/assets/accessibility.tsx

 interface SVGRProps {
  title?: string;
  titleId?: string;
 }
-


Adding this note for my own edification - the newline removal actually doesn't have anything to do with this upgrade/PR or with the recent Node v18 upgrade. It occurred due to our recent babel upgrades, and is a known issue: gregberge/svgr#809

Since this doesn't affect any actual consumer or user experience due to it being generated code, I think we can safely ignore it for now.

kibanamachine · 2023-06-19T05:39:57Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6843/

1Copenut · 2023-06-20T13:12:17Z

Jenkins test this

kibanamachine · 2023-06-20T13:35:45Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6843/

kibanamachine · 2023-06-29T17:36:39Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6843/

`[email protected]` ⏩ `83.0.0` ⚠️ The biggest change in this PR by far is the `EuiButtonEmpty` Emotion conversion, which changes the DOM structure of the button slightly as well as several CSS classes around it. EUI has attempted to convert any custom EuiButtonEmpty CSS overrides where possible, but would super appreciate it if CODEOWNERS checked their touched files. If anything other than a snapshot or test was touched, please double check the display of your button(s) and confirm everything still looks shipshape. Feel free to ping us for advice if not. --- ## [`83.0.0`](https://github.com/elastic/eui/tree/v83.0.0) **Bug fixes** - Fixed `EuiPaginationButton` styling affected by `EuiButtonEmpty`'s Emotion conversion ([#6893](elastic/eui#6893)) **Breaking changes** - Removed `isPlaceholder` prop from `EuiPaginationButton` ([#6893](elastic/eui#6893)) ## [`82.2.1`](https://github.com/elastic/eui/tree/v82.2.1) - Updated supported Node engine versions to allow Node 16, 18 and >=20 ([#6884](elastic/eui#6884)) ## [`82.2.0`](https://github.com/elastic/eui/tree/v82.2.0) - Updated EUI's SVG icons library to use latest SVGO v3 optimization ([#6843](elastic/eui#6843)) - Added success color `EuiNotificationBadge` ([#6864](elastic/eui#6864)) - Added `badgeColor` prop to `EuiFilterButton` ([#6864](elastic/eui#6864)) - Updated `EuiBadge` to use CSS-in-JS for named colors instead of inline styles. Custom colors will still use inline styles. ([#6864](elastic/eui#6864)) **CSS-in-JS conversions** - Converted `EuiButtonGroup` and `EuiButtonGroupButton` to Emotion ([#6841](elastic/eui#6841)) - Converted `EuiButtonIcon` to Emotion ([#6844](elastic/eui#6844)) - Converted `EuiButtonEmpty` to Emotion ([#6863](elastic/eui#6863)) - Converted `EuiCollapsibleNav` and `EuiCollapsibleNavGroup` to Emotion ([#6865](elastic/eui#6865)) - Removed Sass variables `$euiCollapsibleNavGroupLightBackgroundColor`, `$euiCollapsibleNavGroupDarkBackgroundColor`, and `$euiCollapsibleNavGroupDarkHighContrastColor` ([#6865](elastic/eui#6865)) --------- Co-authored-by: Cee Chen <[email protected]> Co-authored-by: Jeramy Soucy <[email protected]> Co-authored-by: Kibana Machine <[email protected]>

cee-chen added chore tech debt labels Jun 14, 2023

cee-chen requested a review from 1Copenut June 14, 2023 18:17

cee-chen commented Jun 14, 2023

View reviewed changes

1Copenut approved these changes Jun 15, 2023

View reviewed changes

cee-chen force-pushed the chore/svgr-upgrades branch from a2f6457 to b4ea529 Compare June 19, 2023 04:07

cee-chen added 3 commits June 18, 2023 21:29

Upgrade @svgr plugins to latest & update script accordingly

e04e9d9

- see https://react-svgr.com/docs/migrate/ for high level of export + API changes - see https://github.com/svg/svgo#default-preset for svgo config changes

Run yarn compile-icons

cd09361

changelog

53a80e1

cee-chen force-pushed the chore/svgr-upgrades branch from 8331356 to 53a80e1 Compare June 19, 2023 04:29

cee-chen marked this pull request as ready for review June 19, 2023 04:31

Lint fix

6730827

cee-chen commented Jun 19, 2023

View reviewed changes

cee-chen enabled auto-merge (squash) June 19, 2023 05:21

snapshots

f37317e

cee-chen merged commit 4fab267 into elastic:main Jun 20, 2023

cee-chen deleted the chore/svgr-upgrades branch June 20, 2023 13:51

breehall mentioned this pull request Jun 28, 2023

Upgrade EUI to 83.0.0 elastic/kibana#160813

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiIcon] Upgrade `svgr`/`svgo` dependencies to latest #6843

[EuiIcon] Upgrade `svgr`/`svgo` dependencies to latest #6843

cee-chen commented Jun 14, 2023 •

edited

Loading

cee-chen left a comment •

edited

Loading

cee-chen Jun 14, 2023

cee-chen Jun 14, 2023

cee-chen Jun 14, 2023

cee-chen Jun 14, 2023

cee-chen Jun 14, 2023

cee-chen commented Jun 14, 2023

kibanamachine commented Jun 14, 2023

1Copenut left a comment

1Copenut commented Jun 15, 2023

1Copenut commented Jun 15, 2023

kibanamachine commented Jun 15, 2023

kibanamachine commented Jun 19, 2023

cee-chen Jun 19, 2023

kibanamachine commented Jun 19, 2023

1Copenut commented Jun 20, 2023

kibanamachine commented Jun 20, 2023

kibanamachine commented Jun 29, 2023

		const license =
		require('../.eslintrc.js').rules['local/require-license-header'][1].license;

[EuiIcon] Upgrade svgr/svgo dependencies to latest #6843

[EuiIcon] Upgrade svgr/svgo dependencies to latest #6843

Conversation

cee-chen commented Jun 14, 2023 • edited Loading

Summary

QA

General checklist

cee-chen left a comment • edited Loading

Choose a reason for hiding this comment

cee-chen Jun 14, 2023

Choose a reason for hiding this comment

cee-chen Jun 14, 2023

Choose a reason for hiding this comment

cee-chen Jun 14, 2023

Choose a reason for hiding this comment

cee-chen Jun 14, 2023

Choose a reason for hiding this comment

cee-chen Jun 14, 2023

Choose a reason for hiding this comment

cee-chen commented Jun 14, 2023

kibanamachine commented Jun 14, 2023

1Copenut left a comment

Choose a reason for hiding this comment

1Copenut commented Jun 15, 2023

1Copenut commented Jun 15, 2023

kibanamachine commented Jun 15, 2023

kibanamachine commented Jun 19, 2023

cee-chen Jun 19, 2023

Choose a reason for hiding this comment

kibanamachine commented Jun 19, 2023

1Copenut commented Jun 20, 2023

kibanamachine commented Jun 20, 2023

kibanamachine commented Jun 29, 2023

[EuiIcon] Upgrade `svgr`/`svgo` dependencies to latest #6843

[EuiIcon] Upgrade `svgr`/`svgo` dependencies to latest #6843

cee-chen commented Jun 14, 2023 •

edited

Loading

cee-chen left a comment •

edited

Loading